<html>

<header>
    <title>Grid Demo</title>
</header>

<body>
    <div class="container">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>

    <h2>试试缩短浏览器宽</h2>
    <div class="container2">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>

    <h2>关键字 fr</h2>
    <div class="container3">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
    </div>


    <h2>grid-template-area</h2>
    <div class="container4">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
    </div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        /* 行间隔 */
        /* row-gap: 2px; */
        /* 列间隔 */
        /* column-gap: 5px; */
        /* gap合并了row-gap和column-gap */
        gap: 5px 5px;
        /* align-items: center; */
        /* justify-items: end; */
        /* place-items 合并 align-items justify-items */
        /* place-items: center end; */

        /* justify-content: space-around; */
        
    }
    .container2 {
        display: grid;
        /* auto-fill 自动调整列宽 */
        grid-template-columns: repeat(auto-fill, 100px);
        /* 3 行，每行高度是 100px */
        grid-template-rows: repeat(2, 100px)
    }
    .container3 {
        display: grid;
        /* 第一个单元格 100px 宽，第二个单元格占用剩余的1/5，第三个单元格占用剩余的4/5 */
        grid-template-columns: 100px 1fr 4fr;
        grid-template-rows: repeat(3, 50px);
    }
    .container4 {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-template-areas: 'a a a'
                             'b b c'
                             'e e c';
        gap: 3px 4px;
    }

    .item {
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item-1 {
        background-color: rgb(239, 212, 177);
        /* 从第二个单元格开始 */
        /* grid-column-start: 2; */
        /* 总共占用两个单元格 */
        /* grid-column-end: span 2; */
        /* 简写grid-column-start, grid-column-end; 第二列开始，到第四列结束 */
        /* grid-column: 2 / 4; */
        /* 第一行开始，到第四行结束 */
        /* grid-row: 1 / 3; */
        /* z-index: 1; */
    }
    .item-2 {
        background-color: rgb(220, 158, 83);
        /* grid-area: c */
    }
    .item-3 {
        background-color: rgb(172, 99, 9);
        /* grid-column: 2; */
        /* grid-row: 1 / 4; */
    }
    .item-4 {
        background-color: rgb(166, 223, 123);
    }
    .item-5 {
        background-color: rgb(47, 208, 90);
    }
    .item-6 {
        background-color: rgb(7, 110, 12);
    }
    .item-7 {
        background-color: rgb(196, 233, 255);
    }
    .item-8 {
        background-color: rgb(87, 206, 227);
    }
    .item-9 {
        background-color: rgb(12, 144, 151);
    }

</style>
</html>